<template>
  <div class="btn">
    <el-button type="danger" size="mini" @click="hangClick">添加一行</el-button>
    <el-button type="success" size="mini" @click="lieClick">添加一列</el-button>
  </div>
  <div class="tab">
    <table border="1">
      <tr v-for="i in num[0]">
        <td v-for="i in list.length" @click="btnClick(i)">
          {{ i }}-{{ list[i - 1].name }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "123",
      num: [1, 5],
      list: [{ name: 123 }, { name: 456 }],
    };
  },
  mounted() {
    console.log(this.list.length);
  },
  methods: {
    btnClick(i) {
      console.log(i, "123");
    },
    hangClick() {
      this.num[0] += 1;
    },
    lieClick() {
      this.num[1] += 1;
    },
  },
};
</script>

<style scoped lang="less">
.btn {
  display: flex;
  justify-content: space-around;
}
table {
  width: 6.5rem;
  margin: 40px auto;
  border-color: #ccc;
  td {
    padding: 10px;
  }
}
</style>